<template>
	<view class="container">

		<view class="container-header">
			<image class="backgroundImage" src="/static/authentication/header-backGround-image.png" mode=""></image>
			<view class="back-button" @click="goBack()">
				<u-icon name="arrow-left" color="#000" size="20"></u-icon>
			</view>
			<view class="back-button-right">
				常见问题
			</view>
			<view class="title">
				“本地达人”认证中心
			</view>
		</view>

		<view class="container-footer">
			<view class="container-information" @click="handleToUserPerson()">
				<view class="leftInformatin">
					<view class="leftInformatin-img">
						<image v-if="clientUserPersonBtn"
							src="/static/authentication/expertInformation-shenfen-active.png" mode=""></image>
						<image v-else src="/static/authentication/expertInformation-shenfen.png" mode=""></image>
					</view>
					<view class="leftInformatin-content">
						<view class="leftInformatin-content-top">
							拥有本地人身份
						</view>
						<view class="leftInformatin-content-bottom">
							成功申请本地人身份
						</view>
					</view>
				</view>

				<view class="rightInformatin" :class="clientUserPersonBtn == true ? '' :'not-qualified'">
					{{ clientUserPersonBtn == true ? '已认证' : '未认证'}}
				</view>
			</view>

			<view class="container-information">
				<view class="leftInformatin">
					<view class="leftInformatin-img">
						<image v-if="clientUserPersonBtn" src="/static/authentication/expertInformation-city-active.png"
							mode=""></image>
						<image v-else src="/static/authentication/expertInformation-city.png" mode=""></image>
					</view>
					<view class="leftInformatin-content">
						<view class="leftInformatin-content-top">
							达人认证城市
						</view>
						<view class="leftInformatin-content-bottom">
							一个账号只能认证一个达人城市
						</view>
					</view>
				</view>

				<view class="notSelectCity" :class="{ 'SelectCity': selectedCityText !== '请选择' }"
					@click="OpenCitySelected()">
					<view>
						{{ selectedCityText }}
					</view>
					<u-icon class="SelectCity-icon" name="arrow-right"
						:color="selectedCityText !== '请选择' ? 'rgba(255, 179, 39, 1)' : '#000'" size="26rpx">
					</u-icon>
				</view>
			</view>

			<view class="container-information">
				<view class="leftInformatin">
					<view class="leftInformatin-img">
						<image v-if="clientPostBtn" src="/static/authentication/expertInformation-fabu-acitve.png"
							mode=""></image>
						<image v-else src="/static/authentication/expertInformation-fabu.png" mode=""></image>
					</view>
					<view class="leftInformatin-content">
						<view class="leftInformatin-content-top">
							发布≥30篇高质量贴
						</view>
						<view class="leftInformatin-content-bottom">
							1篇贴子点赞/收藏/转发达到100个
						</view>
					</view>
				</view>

				<view class="rightInformatin" :class="clientPostBtn == true ? '' :'not-qualified'">
					{{ clientPostBtn == true ? '已达标' : '未达标'}}
				</view>
			</view>

			<view class="container-information">
				<view class="leftInformatin">
					<view class="leftInformatin-img">
						<image v-if="clientUserExpertBtn"
							src="/static/authentication/expertInformation-buchong-active.png" mode=""></image>
						<image v-else src="/static/authentication/expertInformation-buchong.png" mode=""></image>
					</view>
					<view class="leftInformatin-content">
						<view class="leftInformatin-content-top">
							补充个人资料
						</view>
						<view class="leftInformatin-content-bottom">
							填写个人介绍
						</view>
					</view>
				</view>

				<view class="rightInformatin" @click="handleInput"
					:class="clientUserExpertBtn == true ? '' :'not-qualified'">
					{{ clientUserExpertBtn == true ? '去修改' : '去填写'}}
				</view>
			</view>
		</view>

		<view class="footer">
			请确保填写的信息真实有效，并且平台会在您提交申请后的3-5个工作日以内，为您反馈结果。
		</view>

		<view class="footer-btn-top" v-if="currentStatusText == '提交申请'">
			<!-- 协议勾选 -->
			<view class="agreement">
				<label class="checkbox-wrapper" @click="toggleCheckbox">
					<view class="custom-checkbox" :class="{ 'checked': selected }">
						<u-icon v-if="selected" name="checkmark" color="#fff" size="12"></u-icon>
					</view>
					<text>我已知晓并同意
						<text class="protocol" @click.stop="onProtocol">《本地达人服务协议》</text>和
						<text class="protocol" @click.stop="onProtocol">《免责协议》</text>
					</text>
				</label>
			</view>
		</view>

		<view class="footer-btn-wrapper" @click="handleEmit()">
			<view class="footer-btn">
				{{currentStatusText}}
			</view>
		</view>


		<u-picker :show="showSelectCity" :columns="currentPersonCity" @confirm="selectCityOnly"
			@cancel="showSelectCity = false"></u-picker>
	</view>
</template>

<script>
	import {
		getExpertStarts,
		expertAddOrEdit,
		getClientPostHigh
	} from '@/request/api.js';
	export default {
		data() {
			return {
				clientUserPersonBtn: false,
				clientPostBtn: false,
				clientUserExpertBtn: false,
				selected: false,
				queryParams: {},
				currentPersonCity: [],
				showSelectCity: false,
				currentStatusText: '提交申请',
				selectedCityText: '请选择',
				currentUserExpertInfo: {}
			};
		},
		onReady() {

		},
		onShow(options) {
			this.initPage();
			// 恢复之前选择的城市
			const savedCity = uni.getStorageSync('expertSelectedCity');
			console.log(savedCity);
			if (savedCity) {
				this.selectedCityText = savedCity;
			}
		},
		// #ifdef APP-PLUS
		onBackPress(event) {
			uni.setStorageSync('expertSelectedCity', '')
		},
		// #endif
		onReachBottom() {},
		methods: {
			handleEmit() {
				// 如果是待审核状态，直接返回
				if (this.currentStatusText === '待审核') {
					return;
				}

				// 验证所有条件
				const validation = this.validateSubmission();
				if (!validation.isValid) {
					uni.showToast({
						title: validation.message,
						icon: 'none'
					});
					return;
				}

				// 提交申请
				const params = {
					userId: this.$store.state.userInfo.userId,
					cityName: this.selectedCityText,
					expertStarts: 0,
					userName: uni.getStorageSync('userInfo').nickName
				};

				expertAddOrEdit(params).then(res => {
					if (res.data.code === 200) {
						// 提交成功后的处理
						this.currentStatusText = '待审核';
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						});
						uni.navigateBack()
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				}).catch(error => {
					uni.showToast({
						title: '提交失败，请重试',
						icon: 'none'
					});
					console.error('提交失败:', error);
				});
			},
			// 根据选择的城市获取发布帖子的条件是否满足
			getCityForClientPostHigh(cityName) {
				const params = {
					userId: this.$store.state.userInfo.userId,
					cityName
				};
				getClientPostHigh(params).then(res => {
					this.clientPostBtn = res.data.clientPost
				})
			},
			// 验证提交条件
			validateSubmission() {
				if (!this.clientUserPersonBtn) {
					return {
						isValid: false,
						message: '请先认证本地人身份'
					};
				}

				if (!this.selectedCityText || this.selectedCityText === '' || this.selectedCityText === '请选择') {
					return {
						isValid: false,
						message: '请选择认证城市'
					};
				}

				if (!this.clientPostBtn) {
					return {
						isValid: false,
						message: '请先完成发布30篇高质量贴'
					};
				}

				if (!this.clientUserExpertBtn) {
					return {
						isValid: false,
						message: '请补充个人资料'
					};
				}

				if (!this.selected) {
					return {
						isValid: false,
						message: '请阅读并同意本地达人服务协议和免责协议'
					};
				}

				return {
					isValid: true,
					message: ''
				};
			},
			initPage() {
				let params = {
					userId: this.$store.state.userInfo.userId,
				}
				getExpertStarts(params).then(res => {

					if (res.data.code == 200) {
						if (res.data.clientUser == true) {
							// 本地人认证信息
							this.clientUserPersonBtn = true
						}

						if (res.data.clientUserExpert || res.data.clientUserExpert != null) {
							// 个人资料是否填写
							this.clientUserExpertBtn = true
							// 保存数据用于内页数据回显
							this.currentUserExpertInfo = res.data.clientUserExpert
						}

						if (res.data.clientUserExpert == null) {
							this.currentStatusText = '提交申请'
						} else if (res.data.clientUserExpert.expertStarts == 0) {
							this.currentStatusText = '待审核'
						} else {
							this.currentStatusText = '提交申请'
						}


						// 本地人身份可能有多个，需要处理当前认证的达人身份属于哪个城市的
						if (res.data.clientUserPerson || res.data.clientUserPerson != null) {
							// 处理城市名称，去除"市"字
							const processCityName = (cityName) => {
								return cityName
							};

							const domicile = processCityName(res.data.clientUserPerson.domicile);
							const permanent = processCityName(res.data.clientUserPerson.permanent);

							// 过滤掉空值，只保留有效城市名
							const validCities = [domicile, permanent].filter(city => city && city.trim());
							// 去重处理
							const uniqueCities = [...new Set(validCities)];

							if (uniqueCities.length > 0) {
								if (uniqueCities.length === 1) {
									this.currentPersonCity = [uniqueCities];
								} else {
									this.currentPersonCity = [uniqueCities];
								}
							} else {
								this.currentPersonCity = [];
							}
						}
					}
				})
			},
			OpenCitySelected() {
				if (this.currentStatusText == '待审核') {
					return
				}
				this.showSelectCity = true
			},
			selectCityOnly(e) {
				console.log(e);
				this.selectedCityText = e.value[0]
				this.showSelectCity = false
				uni.setStorageSync('expertSelectedCity', this.selectedCityText);
				// 高质量帖子是否完成
				this.getCityForClientPostHigh(this.selectedCityText)
			},
			// 本地人身份认证未通过，跳转到认证界面
			handleToUserPerson() {
				if (this.clientUserPersonBtn == false) {
					uni.navigateTo({
						url: '/pages_sub/authentication/Personal/entrance'
					})
				}

			},

			// 切换复选框状态
			toggleCheckbox() {
				this.selected = !this.selected;
			},
			goBack() {
				uni.navigateBack()
			},
			handleInput() {
				if (this.currentStatusText == '待审核') {
					return
				}
				// 将对象序列化后通过参数传递
				const expertInfo = encodeURIComponent(JSON.stringify(this.currentUserExpertInfo));
				uni.navigateTo({
					url: `/pages_sub/authentication/Expert/expertInformation?expertInfo=${expertInfo}`
				});
			},
			setStatusBarWhite() {
				// 设置状态栏前景色为白色
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '#000000',
					animation: {
						duration: 200,
						timingFunc: 'easeIn'
					}
				});
			},

			setStatusBarBlack() {
				// 如果需要切换回黑色
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: '#ffffff',
					animation: {
						duration: 200,
						timingFunc: 'easeIn'
					}
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	page {
		background-color: #f8f8f8;
	}

	.container {
		height: 100%;

		.container-header {
			height: 440rpx;
			margin-bottom: -20rpx;
			position: relative;

			.backgroundImage {
				width: 100vw;
			}

			.back-button {
				position: fixed;
				top: calc(var(--status-bar-height) + 30rpx);
				left: 30rpx;
				z-index: 10;
				display: flex;
				align-items: center;
				justify-content: center;
				height: 40rpx;
			}

			.back-button-right {
				position: fixed;
				top: calc(var(--status-bar-height) + 30rpx);
				right: 30rpx;
				z-index: 10;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #000000;
				font-weight: 400;
				font-size: 24rpx;
				height: 40rpx;
				line-height: 40rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.title {
				position: fixed;
				top: calc(var(--status-bar-height) + 120rpx);
				left: 30rpx;
				z-index: 10;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				font-size: 36rpx;
			}
		}

		.container-footer {
			margin-top: -130rpx;

			.container-information {
				padding: 40rpx 16rpx;
				border-radius: 20rpx;
				background-color: #ffffff;
				margin: 30rpx 30rpx;
				position: relative;
				z-index: 9;
				box-shadow: 0 12rpx 12rpx rgba(0, 0, 0, 0.06);
				display: flex;
				/* 保持flex布局 */
				justify-content: space-between;
				/* 保持两端对齐 */
				align-items: center;
				/* 添加垂直居中 */

				.leftInformatin {
					display: flex;

					.leftInformatin-img {
						width: 100rpx;
						height: 100rpx;
						border-radius: 50%;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.leftInformatin-content {
						height: 100rpx;
						margin-left: 20rpx;

						.leftInformatin-content-top {
							font-size: 28rpx;
							font-weight: bold;
							line-height: 50rpx;
							color: #000;
						}

						.leftInformatin-content-bottom {
							font-size: 24rpx;
							font-weight: 400;
							line-height: 50rpx;
							color: #787882;
						}
					}
				}

				.rightInformatin {
					background-color: #FCC441;
					width: 110rpx;
					height: 50rpx;
					font-weight: 400;
					font-size: 24rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 30rpx;
				}


				// 未达标状态样式
				.not-qualified {
					background-color: #EDEEEF; // 灰色背景
					color: #999999;
				}

				// 未选择城市样式
				.notSelectCity {
					display: flex;
					align-items: center;
					justify-content: center;
					color: #787882;
					font-size: 26rpx;
					line-height: 30rpx;
				}

				// 已选择或默认选择样式
				.SelectCity {
					display: flex;
					align-items: center;
					justify-content: center;
					color: rgba(255, 179, 39, 1);
					font-size: 28rpx;
					line-height: 30rpx;
				}

				// 选择城市的右箭头
				.SelectCity-icon {
					margin-top: 2rpx;
					margin-left: 10rpx;
				}
			}
		}

		.footer {
			margin: 0 30rpx;
			font-weight: 400;
			font-size: 24rpx;
			line-height: 36rpx;
			color: #787882;
		}

		.footer-btn-top {
			width: calc(100% - 80rpx);
			position: fixed;
			bottom: 126rpx;
			left: 50%;
			transform: translate(-50%, -20%);
			text-align: center;
			color: #fff;
			padding: 40rpx;

			.agreement {
				display: flex;
				align-items: center;
				justify-content: center;

				.checkbox-wrapper {
					display: flex;
					align-items: center;
					cursor: pointer;
				}

				.custom-checkbox {
					width: 32rpx;
					height: 32rpx;
					border-radius: 50%;
					border: 2rpx solid #ccc;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-right: 16rpx;
					background-color: #fff;
					transition: all 0.3s ease;

					&.checked {
						background-color: rgba(255, 179, 39, 1);
						border-color: rgba(255, 179, 39, 1);
					}
				}

				.protocol {
					color: rgba(255, 179, 39, 1);
				}
			}

			.agreement text {
				font-size: 24rpx;
				color: rgba(120, 120, 130, 1);
			}

		}

		/* 底部按钮固定容器 */
		.footer-btn-wrapper {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;
			padding: 20rpx 0 50rpx;
			background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));

			/* 渐变背景 */

			.footer-btn {
				background-color: rgba(255, 179, 39, 1);
				font-weight: 900;
				font-size: 36rpx;
				line-height: 36rpx;
				padding: 30rpx 36rpx;
				text-align: center;
				width: 570rpx;
				border-radius: 40rpx;
				color: rgba(0, 0, 0, 1);
				box-shadow: 0 8rpx 20rpx rgba(255, 179, 39, 0.3);
			}
		}
	}
</style>